<!-- 个人中心 -->
<template>
    <div>
        <div v-if="data[0].value">
            <Title title="个人中心"></Title>
            <div v-for="(item,index) in data"   class="account-center">
                {{ item.title }}:{{item.value}}
            </div>
            <div class="img-box">
                用户头像：<br>
                <el-upload
                    class="avatar-uploader"
                    :action="'/poo'+'/users/avatar_upload?id='+data[0].value"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imgUrl" :src="baseUrl+imgUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script setup>
 import Title from '@/views/home/component/Title.vue';
 import {reactive, ref} from 'vue';
 import { baseUrl } from "@/utile/commen.js"
 //导入pinai
 import { useUserStore } from '@/stores/userStore.js';
 import {getUserInfo} from '@/api/users';
 let imgUrl = ref('');
 const store = useUserStore();//获取用户信息
 const user = JSON.parse(sessionStorage.getItem('user'));
 const data = reactive([
    {title:'用户ID',value:null},
    {title:'用户名',value:''},
    {title:'用户组',value:''},
    {title:'创建时间',value:''},
]);
const getUser = async ()=>{
    const res = await getUserInfo({id:user.id});
    console.log(res);
    data[0].value = res.accountInfo.id;
    data[1].value = res.accountInfo.account;
    data[2].value = res.accountInfo.userGroup;
    data[3].value = res.accountInfo.ctime.slice(0,10);
    imgUrl.value = res.accountInfo.imgUrl;
    console.log(data)
}
getUser();
const handleAvatarSuccess = () => {
    getUser();
    //成功后更新用户信息
    store.changeFlag();
}

const beforeAvatarUpload = (rawFile) => {
    if(!rawFile.type.includes('image')){
      ElMessage.error('文件类型必须是图片');
      return false;
    }
    if(rawFile.size >2*1024*1024){
      ElMessage.error('文件大小不能超过 2M');
      return false;
    }
  return true ;  
};

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.account-center{
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.img-box img{
    width: 200px;
    height: 150px
}
</style>